// 引入vue
import Vue from 'vue'
// 该文件用于创建vuex中最为核心的store
// 通过终端下载 npm i vuex
// 引入vuex  
import Vuex from 'vuex'

// 使用插件  Vuex是vue的插件
Vue.use(Vuex) 

// 准备actions对象，用于响应组件中的动作，不做数据修改
const actions = {
    // 会接收到两个参数，一个是context上下文（迷你版的store），一个是组件传过来的值value
    jia(context,value){
        console.log("调用了actions中的jia函数",this,value)
        // 通过context.commit()调用mutations中要用到的函数
        context.commit('JIA',value)
    },
    jian(context,value){
        console.log("调用了actions中的jian函数")
        // 通过context.commit()调用mutations中要用到的函数
        context.commit('JIAN',value)
    },
    jiaodd(context,value){
        if(context.state.sum % 2 )
            context.commit('JIA',value)
    },
    jiawait(context,value){
        setTimeout(()=>{
            context.commit('JIA',value)
        },300)
    },

}
// 准备mutations对象，用于操作数据（操作state）
const mutations = {  //里面的函数名要大写
    // 接收到两个参数，一个是数据存储对象state，一个是组件传过来的值
    JIA(state,value){
        console.log("调用了mutations中的JIA函数")
        state.sum += value
    },
    JIAN(state,value){
        console.log("调用了mutations中的JIAN函数")
        state.sum -= value
    },
    ADD_PER(state,value){
        state.personlist.unshift(value)
    }

}
// 准备state对象，用于存储数据
const state = {
    sum:0,
    name:'菜菜',
    school:'尚硅谷',
    personlist:[{id:'001',name:'菜菜'}]
}
// 准备getters对象，用于对state中的数据进行计算加工
const getters = {
    // 类似vue中computed
    bigsum(state){
        return state.sum *10
    }
}
// 默认暴露 创new一个store
export default new Vuex.Store({
    actions,
    mutations,
    state,
    getters
    // 对象的名和值相同可以简写
})